/* eslint-disable @typescript-eslint/indent */
/* eslint-disable indent */
/* eslint-disable react/jsx-indent */
import React, { memo } from 'react';
import { Avatar, Row, Col, Tag } from 'antd';
import { WebAudio } from '@/molecules';
import Pre from '@/components/Pre';
import { RecommendTip } from '@/pages/Recruitment/Interview/Containers';

import { getParse } from '@/pages/Recruitment/utils';
import styles from './index.less';
import mapData from '../../Interview/statusMap';

const { colorObj, textObj } = mapData;
// 组件用于面试详情 综合评价和自定义问题公用组件 通过state判断是哪种类型样式组件
const DetailQuestion = ({ dataSource = {}, type = 'state', ...rest }) => {
    // console.log('dataSource', dataSource);
    const {
        answer = {},
        recordUrl = '',
        comments = [],
        interviewArranges = {},
        interviewEvaluateResults = [],
        timeInfo = ''
    } = dataSource;
    const recordTimeInfo = answer?.recordTimeInfo ? answer?.recordTimeInfo : '[]';
    // console.log('===============================================>recordTimeInfo', recordTimeInfo);
    const access = type === 'state' ? interviewEvaluateResults : comments;
    // return parseInt((a - b) / 1000, 10);

    return (
        <div {...rest}>
            <div className={styles.questionItem}>
                {type === 'state' ? null : (
                    <div className={styles.speak}>
                        候选人答案：
                        <span className={styles.answers}>
                            <Pre>{answer?.answerContent}</Pre>
                        </span>
                    </div>
                )}

                <div className={styles.voice}>
                    {type === 'state'
                        ? interviewArranges?.recordUrl && (
                              <>
                                  面试录音：
                                  <div>
                                      <WebAudio
                                          src={interviewArranges?.recordUrl}
                                          // src="https://vv-tech-public-bucket.oss-cn-hongkong.aliyuncs.com/1604024004179fb589e0d-c139-4645-aaae-b0fa295df2b2_1604024004130.mp3"
                                          controls="controls"
                                          style={{ height: '30px', margin: '15px 0' }}
                                      />
                                  </div>
                              </>
                          )
                        : JSON.parse(recordTimeInfo)?.length > 0 && (
                              <>
                                  <div>答案录音：</div>
                                  {JSON.parse(recordTimeInfo).map(item => (
                                      <WebAudio
                                          // src={`${recordUrl}#t=${getParse(
                                          //     item?.startTime,
                                          //     timeInfo?.startTime,
                                          //     timeInfo?.endTime
                                          // )},${getParse(item?.endTime, timeInfo?.startTime, timeInfo?.endTime)}`}
                                          src={`${recordUrl}#t=${getParse(
                                              timeInfo?.startTime,
                                              timeInfo?.endTime,
                                              item?.startTime,
                                              item?.endTime
                                          )}`}
                                          controls="controls"
                                          style={{ height: '30px', margin: '15px 0' }}
                                      />
                                  ))}
                              </>
                          )}
                </div>
            </div>
            <div className={styles.questionEvaluate}>
                <div className={styles.evaluate}>面试评价：</div>
                {access.map(item => (
                    <div className={styles.mess}>
                        <div className={styles.mLeft}>
                            <Avatar icon="user" src={item?.employeeAvatar} size={24} style={{ flex: '0 0 80px' }} />
                        </div>
                        <div className={styles.mRight}>
                            <Row gutter={0}>
                                <Col>
                                    <span className={styles.name}>
                                        {item?.commentEmployeeName || item?.resultEmployeeName}
                                    </span>
                                </Col>
                                <Col>
                                    {type === 'state' ? (
                                        <div style={{ display: 'flex' }}>
                                            <Tag color={colorObj[item?.resultType]} style={{ marginLeft: '10PX' }}>
                                                {textObj[colorObj[item?.resultType]]}
                                            </Tag>
                                            <RecommendTip result={item} />
                                        </div>
                                    ) : (
                                        <span className={styles.post}>（{item?.interviewRoundName}）</span>
                                    )}
                                </Col>
                            </Row>
                            <div className={styles.empty}></div>
                            <Row gutter={24}>
                                <Col>
                                    <span className={styles.cont}>
                                        <Pre>{item?.commentContent || item?.resultContent}</Pre>
                                    </span>
                                </Col>
                            </Row>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default memo(DetailQuestion);
